<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment(title,active)">
    <meta charset="utf-8"/>
    <title>
        <th:block th:text="${title != null ? title : ''} + ' Hubiao'"></th:block>
    </title>
    <meta content="f3pd3lmpkj" name="baidu-site-verification"/>
    <meta content="b0059bf0e1f39b05" property="wb:webmaster"/>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
    <link href="https://cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Rosario:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&amp;subset=latin,latin-ext"
          rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"
          type="text/css"/>
    <link rel="stylesheet" th:href="@{/blog/css/main.css}" type="text/css"/>
    <meta content="Hubiao" name="keywords"/>
    <link rel="shortcut icon" th:href="@{/blog/image/favicon.ico}" type="image/x-icon"/>
    <meta content="Trust yourself！" name="description"/>
    <script type="text/javascript">
        var CLUAS = window.CLUAS || {};
        var CONFIG = {
            root: '/',
            scheme: 'Pisces',
            sidebar: {
                "position": "left",
                "display": "post",
                "offset": 12,
                "offset_float": 0,
                "b2t": false,
                "scrollpercent": true
            },
            fancybox: true,
            motion: true,
            algolia: {
                applicationID: '{{ algolia.appID }}',
                apiKey: '{{algolia.searchKey}}',
                indexName: '{{algolia.indexName }}',
                hits: {"per_page": 7},
                labels: {
                    "input_placeholder": "搜索",
                    "hits_empty": "未发现与 「${query}」相关的内容",
                    "hits_stats": "${hits} 条相关条目，使用了 ${time} 毫秒"
                }
            }
        };
    </script>
</head>
<body>

<div class="container sidebar-position-left page-home">
    <div class="headband"></div>
    <div th:replace="blog/fragments/header::header"></div>
    <main class="main" id="main">
        <div class="main-inner">

            <!--主体content-->
            <div id="content" layout:fragment="content"></div>

            <!--侧边栏-->
            <div class="sidebar-toggle">
                <div class="sidebar-toggle-line-wrap">
                    <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
                    <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
                    <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
                </div>
            </div>
            <div th:replace="blog/fragments/sidebar::sidebar"></div>

        </div>
    </main>
    <!--底部footer-->
    <div th:replace="blog/fragments/footer::footer(${commons.site_record()})"></div>

    <div class="back-to-top">
        <i class="fa fa-arrow-up"></i> <span id="scrollpercent"><span>0</span>%</span>
    </div>
</div>

<script type="text/javascript">
    if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
        window.Promise = null;
    }
</script>
<script src="https://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js" type="text/javascript"></script>
<script th:src="@{/blog/jquery.lazyload/1.9.3/jquery.lazyload.min.js}" type="text/javascript"></script>
<script th:src="@{/blog/velocity/1.2.3/velocity.min.js}" type="text/javascript"></script>
<script th:src="@{/blog/velocity/1.2.3/velocity.ui.min.js}" type="text/javascript"></script>
<script th:src="@{/blog/fancybox/2.1.5/jquery.fancybox.pack.js}" type="text/javascript"></script>
<script th:src="@{/blog/js/src/utils.js}" type="text/javascript"></script>
<script th:src="@{/blog/js/src/motion.js}" type="text/javascript"></script>
<script th:src="@{/blog/js/src/affix.js}" type="text/javascript"></script>
<script th:src="@{/blog/js/schemes/pisces.js}" type="text/javascript"></script>
<script th:src="@{/blog/js/src/scrollspy.js}" type="text/javascript"></script>
<script th:src="@{/blog/js/src/post-details.js}" type="text/javascript"></script>
<script th:src="@{/blog/js/src/bootstrap.js}" type="text/javascript"></script>
<script th:src="@{/blog/js/src/algolia-search.js}" type="text/javascript"></script>
<link rel="stylesheet" th:href="@{/blog/lib/algolia-instant-search/instantsearch.min.css}">
<script th:src="@{/blog/lib/algolia-instant-search/instantsearch.min.js}" type="text/javascript"></script>
<script>
    var href = location.href;
    var id = href.substring(href.lastIndexOf("/") + 1, href.length);
    if (id == "") {
        id = "index";
    }
    var ids = ["index", "categories", "archives", "tags", "about"];
    for (var i = 0; i < ids.length; i++) {
        if (id == ids[i]) {
            $("#" + id).addClass("menu-item-active");
        } else {
            $("#" + ids[i]).removeClass("menu-item-active");
        }
    }

    function commentClick() {
        var content = $("#comment-content").val();
        var author = $("#nickname").val();
        var email = $("#email").val();
        var url = $("#url").val();
        var coid = $("#coid").val();
        var cid = $("#cid").val();
        var csrf_token = $("#csrf_token").val();

        if (null == content || "" == content || undefined == content) {
            alert("内容不能为空");
            return false;
        }
        if (null == author || "" == author || undefined == author) {
            alert("姓名不能为空");
            return false;
        }
        if (null == email || "" == email || undefined == email) {
            alert("邮箱不能为空");
            return false;
        }

        var data = {
            "content": content,
            "author": author,
            "email": email,
            "url": url,
            "csrf_token": csrf_token,
            "coid": coid,
            "cid": cid
        };

        console.log(data);
        $.ajax({
            type: 'post',
            url: '/comment',
            data: data,
            async: false,
            dataType: 'json',
            success: function (result) {
                // $('#comment-form input[name=coid]').val('');
                if (result && result.code == 'success') {
                    alert("评论已提交至后台审核!");
                    window.location.reload();
                } else {
                    if (result.msg) {
                        alert(result.msg);
                    }
                }
            }
        });
    }
</script>
</body>
</html>